<template>
  <!-- <div>
        <el-container class="common-layout">
            <el-main>
                <div>
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        基础资料/<span style="color: #0098FF;">承运商管理</span>
                    </span>
                </div>
                <div style="float: left;padding-left: 25px;padding-top: 20px;">
                    <el-button type="primary" @click="Add">新增</el-button>
                </div>
                <div style="padding-right: 310px;padding-top: 50px;">
                    <p>
                        创建日期:&nbsp;&nbsp;
                        <el-date-picker v-model="time" type="daterange" range-separator="To"
                            start-placeholder="Start date" end-placeholder="End date" :size="size" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" />
                        <el-input v-model="name" style="width: 240px;margin-left: 10px;" placeholder="请输入公司名称搜索"
                            :prefix-icon="Search" />&nbsp;&nbsp;
                        <el-button type="primary" @click="Get">搜索</el-button>
                        <el-button plain @click="CZ">重置</el-button>
                    </p>
                </div>
                <div style="padding-left: 25px;">
                    <el-table :data="tableData" style="width: 1200px;height: 410px;">
                        <el-table-column property="cr_id" label="承运商id" width="" ></el-table-column>
                        <el-table-column property="cr_cp_name" label="公司名称" width=""></el-table-column>
                        <el-table-column property="cr_encode" label="承运商编码" width=""></el-table-column>
                        <el-table-column property="cr_type" label="承运商类型" width=""></el-table-column>
                        <el-table-column property="dv_num" label="司机数量" width=""></el-table-column>
                        <el-table-column property="vc_num" label="车辆数量" width=""></el-table-column>
                        <el-table-column property="cr_address" label="公司地址" width=""></el-table-column>
                        <el-table-column property="cr_contract" label="是否签订合同" width="">
                            <template #default="scope">
                                <span>{{ ht(scope.row.cr_contract) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="cr_state" label="状态" width="">
                            <template #default="scope">
                                <span style="color: #00FF00;">{{ State(scope.row.cr_state) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="" label="操作" width="150">
                            <template #default="scope">
                                <el-button link type="primary" size="small" @click="XQ(scope.row.cr_id)">
                                    详情
                                </el-button>
                                <el-button link type="primary" size="small"
                                    @click="update(scope.row.cr_id)">编辑</el-button>
                                <el-button plain link size="small" type="danger" @click="del(scope.row.cr_id)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination style="float: right;padding-top: 10px;" v-model:current-page="currentPage"
                    v-model:page-size="PageSize" :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled"
                    :background="background" layout="total, sizes, prev, pager, next, jumper" :total="count"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </el-main>
        </el-container>
    </div> -->
  <div class="f_div">
    <div class="t_div">基础资料 / <a href="#">承运商管理</a></div>
    <el-container>
      <el-header class="header"
        ><div class="h_div">
          <div class="h_in_vid">
            <el-button type="primary" style="width: 80px" @click="Add"
              >新增</el-button
            >
          </div>
        </div></el-header
      >
      <el-header class="header2"
        ><div class="h_div">
          <el-row :gutter="2">
            <el-col :span="6">
              <el-form
                :model="form"
                label-width="auto"
                style="max-width: 1000px"
              >
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="time"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="请选择日期"
                    end-placeholder="请选择日期"
                    :size="size"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4"
              ><el-input
                v-model="name"
                style="width: 240px; margin-left: 10px"
                placeholder="请输入公司名称搜索"
                :prefix-icon="Search"
            /></el-col>
            <el-col :span="3"
              ><el-button type="primary" style="width: 80px" @click="Get"
                >搜索</el-button
              >
              <el-button style="width: 80px" @click="CZ"
                >重置</el-button
              ></el-col
            >
          </el-row>
        </div>
      </el-header>
      <el-main class="main">
        <el-table
          height="442px"
          :data="tableData"
          style="width: 100%"
          row-key="depart_id"
          default-expand-all
          stripe
          :header-cell-style="{
            background: '#F7F7F7',
            color: '#999',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="cr_id"
            label="承运商id"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="cr_cp_name"
            label="公司名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="cr_encode"
            label="承运商编码"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="cr_type"
            label="承运商类型"
            width="220"
          ></el-table-column>
          <!-- <el-table-column
            prop="dv_num"
            label="司机数量"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="vc_num"
            label="车辆数量"
            width="80"
          ></el-table-column> -->
          <el-table-column
            prop="cr_address"
            label="公司地址"
            width="200"
          ></el-table-column>
          <el-table-column prop="cr_contract" label="是否签订合同" width="120">
            <template #default="scoped">
              <el-button link type="success">
                {{ ht(scoped.row.cr_contract) }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="cr_state" label="状态" width="100">
            <template #default="scoped">
              <el-button link type="success">
                {{ State(scoped.row.cr_state) }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scoped">
              <el-button
                link
                type="primary"
                size="small"
                @click="XQ(scoped.row.cr_id)"
              >
                详情
              </el-button>
              <el-button
                link
                type="primary"
                size="small"
                @click="update(scoped.row.cr_id)"
                >编辑</el-button
              >
              <el-button
                plain
                link
                size="small"
                type="danger"
                @click="del(scoped.row.cr_id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[4, 6, 8, 10]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
//import axios from 'axios';
import $http from "@/axios/base.js";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
export default {
  setup() {
    let tableData = ref([]);
    let currentPage = ref(1);
    let PageSize = ref(10);
    let count = ref();
    let name = ref("");
    let time = ref("");
    let router = useRouter();

    function show() {
      //查询全部
      $http
        .get(
          "http://localhost:5261/api/Carrier_ment/Get_Ments?currentPage=" +
            currentPage.value +
            "&PageSize=" +
            PageSize.value
        )
        .then((res) => {
          tableData.value = res;
          console.log(tableData.value);
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }
    show();

    function show2() {
      //查询总数
      $http
        .get(
          "http://localhost:5261/api/Carrier_ment/Count?time=" +
            time.value +
            "&Cr_cp_name=" +
            name.value
        )
        .then((res) => {
          count.value = res;
        });
    }
    show2();

    function Get() {
      //条件查询
      if (time == "" && name == "") {
        show();
        show2();
      } else {
        $http
          .get(
            "http://localhost:5261/api/Carrier_ment/Carrier_Ments_time?time=" +
              time.value +
              "&Cr_cp_name=" +
              name.value +
              "&currentPage=" +
              currentPage.value +
              "&PageSize=" +
              PageSize.value
          )
          .then((res) => {
            tableData.value = res;
            console.log(tableData.value);
            show2();
          })
          .catch((err) => {
            console.log("错误:" + err);
          });
      }
    }

    function State(state) {
      //状态转换
      switch (state) {
        case 0:
          return "停用";
        case 1:
          return "启用";
      }
    }

    function ht(cr_contract) {
      //是否签订合同
      switch (cr_contract) {
        case 0:
          return "否";
        case 1:
          return "是";
      }
    }

    function handleSizeChange(val) {
      PageSize.value = val;
      //console.log(PageSize.value);
      show();
    }

    function handleCurrentChange(val) {
      currentPage.value = val;
      //alert(currentPage.value);
      show();
    }

    function del(id) {
      ElMessageBox.confirm("确认是否删除?", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
        draggable: true,
        overflow: true,
        lockScroll: false, //防止抖动
      })
        .then(() => {
          $http
            .delete("http://localhost:5261/api/Carrier_ment/Delete?Cr_id=" + id)
            .then((res) => {
              if (res) {
                ElMessage.success("删除成功!");
                show();
                show2();
              } else {
                ElMessage.success("删除失败!");
              }
            });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "删除取消",
          });
        });
    }

    function update(id) {
      router.push({ path: "/CYSUpdate", query: { id } });
    }

    function XQ(id) {
      router.push({ path: "/CYSXQ", query: { id } });
    }

    function CZ() {
      name.value = "";
      time.value = "";
      show();
      show2();
    }

    function Add() {
      router.push("/CYSAdd");
    }

    return {
      tableData,
      currentPage,
      PageSize,
      count,
      handleSizeChange,
      handleCurrentChange,
      name,
      time,
      CZ,
      del,
      update,
      Search,
      Get,
      State,
      ht,
      Add,
      XQ,
    };
  },
};
</script>

<style scoped>
.common-layout {
  /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
  /* background-color: #D3DCE6; */
  /* height: 900px;
    width: 1500px;
    margin: auto;
    padding: auto;
    border: 1px solid black; */
  /* margin: 50px; */
}

.title {
  /* padding-right: 1030px;
    padding-top: 20px; */
}

.pagination-container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}
a {
  text-decoration: none;
}
.f_div {
  padding: 0px 50px;
}
.h_div {
  height: 39px;
  margin-top: 15px;
}
.h_in_vid {
  width: 800px;
  height: 20px;
  margin-top: 20px;
  display: flex;
}
.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}
.header2 {
  background-color: #ffffff;
}
.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 650px;
}
</style>